<template>
  <div class="container">
    <el-drawer
      title="热回答"
      :visible.sync="drawerVisible.drawer1"
      direction="btt"
      size="350px"
      :modal="false"
      :show-close="false"
      custom-class="draw-comments"
      @close="closeDrawer('drawer1')"
    >
      <div class="reqInfo-card">
        <div class="card-content">
          <div class="title">{{reqCard.title}}</div>
          <div class="detial"><span>{{reqCard.message}}</span></div>
        </div>
        <div class="card-bottom">
          <div class="info">
            <div>
              <svg
                class="icon footer-icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-liulan"></use>
              </svg>
              <span>{{reqCard.view_num}}</span>
            </div>
            <div>
              <span>{{reqCard.comment_num}}个回答</span>
            </div>
            <div>
              <svg
                class="icon footer-icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-shijian"></use>
              </svg>
              <span>{{$formatDate2(reqCard.moment)}}</span>
            </div>
            <div>
              <svg
                class="icon footer-icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-touxiang"></use>
              </svg>
              <span>{{reqCard.username}}</span>
            </div>
          </div>

        </div>
      </div>
      <div class="reqComments">
        <div class="comHeader"> <svg
            class="icon  comHeader-icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-pinglun-08"></use>
          </svg>
          <div class="order-span">
            <span @click="sortByTime">最新</span><span @click="sortByComments">最热</span>
          </div>
        </div>
        <div class="com-main">
          <ReqComCard
            v-for="(reqComcard,index) in reqComments"
            :reqComcard='reqComcard'
            :key="index"
            @getReqComment='like_getReqComment'
          ></ReqComCard>

        </div>

      </div>
      <div class="comReq-input">
        <div
          class="spacer"
          @click="openDrawer('drawer3')"
        ><button class="secondary-button">
            写回答
          </button></div>
      </div>

    </el-drawer>
    <el-drawer
      :visible.sync="drawerVisible.drawer3"
      direction="btt"
      size="350px"
      :modal="false"
      :show-close="false"
      custom-class="edit-comments"
      @close="closeDrawer('drawer3')"
    >
      <Edit
        v-on:getEditMessage='getEditMsg'
        ref="edit"
      ></Edit>
      <div
        class="com-btn"
        @click="pubClick()"
      >
        <button class="com-pub-btn">发布
        </button>
      </div>
    </el-drawer>
    <div
      class="card"
      @click="reqCardClick()"
    >
      <div class="card-content">
        <div class="title">{{reqCard.title}}</div>
        <div class="detial"><span>{{reqCard.message}}</span></div>
      </div>
      <div class="card-bottom">
        <div class="info">
          <div>
            <svg
              class="icon footer-icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-liulan"></use>
            </svg>
            <span>{{reqCard.view_num}}</span>
          </div>
          <div>
            <span>{{reqCard.comment_num}}个回答</span>
          </div>
          <div>
            <svg
              class="icon footer-icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-shijian"></use>
            </svg>
            <span>{{$formatDate2(reqCard.moment)}}</span>
          </div>
          <div>
            <svg
              class="icon footer-icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-touxiang"></use>
            </svg>
            <span>{{reqCard.username}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Edit from "../../../../components/Edit";
import ReqComCard from "./reqComCard";
import { addReqCommentsAPI, getReqCommentsAPI, updateReqViewAPI } from "@/api";

export default {
  data() {
    return {
      message: "",
      reqComments: [],
      drawerVisible: {
        drawer1: false,
        drawer2: false,
        drawer3: false,
      },
    };
  },
  props: ["reqCard"],
  methods: {
    // 排序
    sortByTime() {
      console.log("rweagaegfawefaw", this.reqComments);

      this.reqComments.sort((a, b) => {
        const dateA = new Date(a.moment);
        const dateB = new Date(b.moment);
        return dateB - dateA; // 降序排列
      });
    },
    sortByComments() {
      this.reqComments.sort((a, b) => b.like_num - a.like_num);
    },
    openDrawer(drawerName) {
      console.log(drawerName);
      if (drawerName == "drawer1") {
        this.drawerVisible.drawer1 = true;
      } else if (drawerName == "drawer2") {
        this.drawerVisible.drawer2 = true;
      } else {
        this.drawerVisible.drawer3 = true;
      }
    },
    closeDrawer(drawername) {
      if (drawername == "drawer1") {
        this.drawerVisible.drawer1 = false;
      } else if (drawername == "drawer2") {
        this.drawerVisible.drawer2 = false;
      } else {
        this.drawerVisible.drawer3 = false;
      }
    },

    // 卡片点击时获取该卡片的评论
    reqCardClick() {
      this.openDrawer("drawer1");
      // 更新浏览量
      this.updateReqView(this.reqCard.id);
      this.getReqComment();
    },
    // 用户点赞更新req 浏览量
    async updateReqView(request_id) {
      const res = await updateReqViewAPI(request_id);
      // 成功 TODO: 再次获取卡片
      // this.$store.dispatch("getReqCards", { way: 0, text: "" });
      // this.$store.dispatch("getRecentCard", { way: 2, text: "" });
    },
    // 获取edit中的文字
    getEditMsg(msg) {
      console.log("触发了");
      console.log("富文本内容", msg);
      this.message = msg;
    },
    // 加入提问评论
    async addReqComments() {
      if (this.message != "") {
        const res = await addReqCommentsAPI({
          request_id: this.reqCard.id,
          message: this.message,
        });
        console.log("发布评论", res);
        // 获取评论
        this.getReqComment();
      } else {
        this.$message("请完善信息");
      }
    },
    // 获取评论
    async getReqComment() {
      console.log(this.reqCard.id);
      const res = await getReqCommentsAPI(this.reqCard.id);
      this.reqComments = res.data;
      console.log(this.reqComments);
    },

    // 用户点赞 再次获取该问题卡片的评论
    like_getReqComment() {
      // 发布或点赞的时候再重新获取卡片要不然会出问题 模糊查询
      // 成功 TODO: 再次获取卡片---发布再获取
      // this.$store.dispatch("getReqCards", { way: 0, text: "" });
      // this.$store.dispatch("getRecentCard", { way: 2, text: "" });
      this.getReqComment();
    },
    // 发布按钮点击事件
    pubClick() {
      this.addReqComments();
      this.message = "";
      // 清空子内容组件
      this.$refs.edit.clearContent();
      // 不能点击获取有问题 ---- 模糊查询直接索引错误
      // this.$emit("getReqCard");
      // 成功 TODO: 再次获取卡片---点击也不行 只有页面加载获取正常
      // this.$store.dispatch("getReqCards", { way: 0, text: "" });
      // this.$store.dispatch("getRecentCard", { way: 2, text: "" });
      setTimeout(() => {
        this.closeDrawer("drawer3");
      }, 800);
    },
  },
  mounted() {
    console.log("222", this.reqCard);
  },
  components: {
    Edit,
    ReqComCard,
  },
};
</script>

 <style lang="less" scoped>
// 提问栏按钮
.pub-btn {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding-right: 20px;
}
.req-pub-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background-color: #52c1f4;
  color: white;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #64ccc5;
  transition-duration: 0.3s;
  margin-bottom: -20px;
  text-align: center;
  box-sizing: border-box;
}
.req-pub-btn:active {
  transform: scale(1.1);
  transition-duration: 0.3s;
  box-sizing: border-box;
  box-shadow: 2px 2px 0px rgb(140, 32, 212);
}
// 富文本框
::v-deep .el-drawer.btt.edit-comments {
  height: 74% !important;
}
::v-deep .el-drawer__body {
  justify-content: flex-start !important;
}
.com-btn {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding: 25px;
  align-items: center;
  text-align: center;
}
.com-pub-btn {
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background-color: #52c1f4;
  color: white;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #64ccc5;
  transition-duration: 0.3s;
  margin-bottom: -20px;
}
.com-pub-btn:hover svg {
  right: 43%;
  margin: 0;
  padding: 0;
  border: none;
  transition-duration: 0.3s;
}

.com-pub-btn:active {
  transform: translate(4px, 4px);
  transition-duration: 0.3s;
  box-shadow: 2px 2px 0px rgb(140, 32, 212);
}
// 发布问题
.req-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.title-input {
  display: flex;
  width: 100%;
  justify-content: center;

  align-items: flex-end;
  margin-top: 10px;
}
.body-input {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-end;
}
.req-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 50%;
  margin-top: 20px;
}
.title-input-area {
  background: #a0bbe1;
  height: 30px;
  border: 1px solid #a9c9ff;
  margin-top: 3px;
  color: #4b5563;
  width: 75%;
  resize: none;
  outline: none;
  border-radius: 5px;
  padding: 10px;
  transition: border-color 0.3s;
}
.req-body-area {
  background: #a0bbe1;
  height: 80%;
  border: 1px solid #a9c9ff;
  margin-top: 3px;
  color: #4b5563;
  width: 75%;
  resize: none;
  outline: none;
  border-radius: 5px;
  padding: 10px;
  transition: border-color 0.3s;
}
// 抽屉问题
/* 抽屉评论 */
::v-deep .el-drawer__body {
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-drawer.rtl.req-comments {
  height: 90%;
  background-color: #b6dbfe;
  border-radius: 10px;
  width: 40% !important;
  right: 2%;
  top: 8%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
::v-deep .el-drawer__container {
  position: relative;

  display: flex;

  left: 0;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
  height: 90%;
  width: 100%;
}

::v-deep .el-drawer__wrap.draw-comments {
  background-color: #98c5e5;
}

// 发问题

// 写问题
.Btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background-color: #52c1f4;
  color: white;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #64ccc5;
  transition-duration: 0.3s;
  margin-bottom: -20px;
}

.svg {
  width: 13px;
  position: absolute;
  right: 0;
  margin-right: 20px;
  fill: white;
  transition-duration: 0.3s;
}

.Btn:hover svg {
  right: 43%;
  margin: 0;
  padding: 0;
  border: none;
  transition-duration: 0.3s;
}

.Btn:active {
  transform: translate(4px, 4px);
  transition-duration: 0.3s;
  box-shadow: 2px 2px 0px rgb(140, 32, 212);
}
.reqBtn {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding-right: 50px;
}
// 抽屉回答
::v-deep .el-drawer__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 20px;
  margin-bottom: 16px;
}
::v-deep .el-drawer__body {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
::v-deep .el-drawer.btt {
  height: 100%;
  width: 70%;
  background-color: #b6dbfe;
  border-radius: 10px;
  left: 15%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
::v-deep .el-drawer.btt.draw-comments {
  height: 99% !important;
}
::v-deep .el-drawer__container {
  position: relative;

  display: flex;

  height: 100%;
  width: 100%;
}

::v-deep .el-drawer__wrap.draw-comments {
  background-color: #98c5e5;
}

// 抽屉问题主要信息

.reqInfo-card {
  display: flex;
  width: 100%;
  width: 100%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;

  align-items: flex-start;
  position: relative;
  border-radius: 1.5em;
  padding: 2em;
  transition: transform 0.4s ease;
  margin-bottom: 20px;
}
// 抽屉回答问题
.comReq-input {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
  justify-content: flex-end;
  align-items: center;
}

.spacer {
  display: flex;
  width: 10%;
  align-items: center;
  justify-content: space-around;
}
.secondary-button {
  stroke: #d1d5db;
  background: #b7b6ff;
  border: 1px solid #b7b6ff;
  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.3s;
  cursor: pointer;
}
.secondary-button:hover {
  transform: scale(1.1);
}

// 周抽屉回答--header图标--评论
.comHeader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid #a8a7fc;
}

.comHeader-icon {
  width: 30px;
  height: 30px;
}
.reqComments {
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  height: 80%;
  width: 100%;
  overflow: auto;
}

.order-span {
  display: flex;
  width: 10%;
  justify-content: space-around;
  align-items: center;
}
.order-span > span {
  cursor: pointer;
  text-align: center;
  width: 40px;
  border-radius: 20px;
  transition: 0.5s;
}
.order-span > span:hover {
  background-color: #b7b6ff;
}

// 用户回答
.com-card {
  width: 90%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 1px;
  position: relative;
  padding: 0.4em;
  transition: transform 0.4s ease;
  margin-top: 20px;
  min-height: 100px;
}
.com-card-detial {
  font-size: 15px;
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 20px;
}
// 用户回答点赞小图标
.com-card-like-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
// 用户回答主要区域
.com-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 90%;
  overflow: auto;
}

/*定义滚动条宽度和颜色*/
.com-main::-webkit-scrollbar {
  width: 4px;
}

.com-main::-webkit-scrollbar-track {
  background: #d2f3ef;
}

.com-main::-webkit-scrollbar-thumb {
  background: #94f0f0;
}

/* 悬停效果 */
.com-main::-webkit-scrollbar-thumb:hover {
  background: #5cd0f4;
}
// card底部小图标
.footer-icon {
  width: 20px;
  height: 20px;
}

.info {
  font-size: 13px;
  justify-content: center;
  align-items: center;
}
.info > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  opacity: 0.8;
}
.info > div > span {
  padding-left: 5px;
  // opacity: 0.7;
}
// 最新提问
.recentReq {
  display: flex;
  width: 100%;
  height: 290px;
  overflow: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 滚动条样式调
.recentReq::-webkit-scrollbar {
  display: none;
}
.hot-title > span {
  font-weight: bold;
}

// 最新提问
.recentTime {
  display: flex;
  width: 30%;
  align-items: center;
  justify-content: center;
}
.recentTime > span {
  font-weight: bold;
}

.recent-card {
  width: 90%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  border-radius: 1em;
  padding: 0.5rem;
  transition: transform 0.4s ease;
  margin-bottom: 20px;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
}
.recent-card:hover {
  cursor: pointer;
  transform: scale(0.98);
}

.recent-card:active {
  transform: scale(0.9);
}
.card-content {
  width: 100%;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
  padding-bottom: 4px;
}
.detial {
  display: flex;
  width: 100%;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
}
.detial > span {
  width: 100%;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
}
.recentReq-title {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  padding: 3px;
  padding-bottom: 10px;
  line-height: 23px;
}
// 热点筛选
.input-container {
  width: 18%;
  position: relative;
}

.input-icon {
  position: absolute;
  right: 10px;
  top: calc(50% + 5px);
  transform: translateY(calc(-50% - 5px));
}

.input {
  width: 100%;
  height: 30px;

  transition: 0.2s linear;
  border: 2.5px solid black;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.input:focus {
  outline: none;
  border: 0.5px solid black;
  box-shadow: -5px -5px 0px black;
}

.input-container:hover > .icon {
  animation: anim 1s linear infinite;
}

@keyframes anim {
  0%,
  100% {
    transform: translateY(calc(-50% - 5px)) scale(1);
  }

  50% {
    transform: translateY(calc(-50% - 5px)) scale(1.1);
  }
}
// 结束

// 卡片底部四个span图标
.info {
  display: flex;
  justify-content: center;
  align-items: center;
}

Container {
  // background-color: rgb(227, 255, 255);
  padding: 10px;
  border-radius: 10px;
  width: 60%;
  flex-direction: column;
  height: 95%;
  overflow-y: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: -20px;
}
.container {
}
.req
// 最热
.hot-icon {
  width: 40px;
  height: 40px;
}
// 最新图标
.time-icon {
  width: 35px;
  height: 35px;
}
.req-icon {
  width: 20px;
  height: 20px;
}
.header {
  display: flex;
  width: 95%;
  margin-top: 10px;
  align-items: center;
  justify-content: flex-start;
}
.hot-title {
  display: flex;
  width: 38%;
  align-items: center;
  justify-content: flex-start;
}
.orderCheck {
  width: 35%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: -10px;
}
.reqContainer::-webkit-scrollbar {
  display: none;
}
.card {
  width: 90%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;

  align-items: flex-start;
  position: relative;
  border-radius: 1.5em;
  padding: 2em;
  transition: transform 0.4s ease;
  margin-bottom: 20px;
}
.title {
  font-size: 20px;
  line-height: 24px;
}
.detial {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 15px;
}
.card:hover {
  cursor: pointer;

  transform: scale(0.99);
}

.card:active {
  transform: scale(0.96);
}
</style>